<template>
  <header class="flex justify-between items-center">
    <span
      class="text-[12px] text-gray-600 w-[80px] text-right enter-y block fixed top-[12px] right-[10px]"
    >
      <var-countdown :time="time" @change="handleChange" @end="end" />
    </span>
  </header>
</template>

<script setup lang="ts">
  import { TimeData } from '@varlet/ui/types/countdown';

  const props = defineProps({
    title: {
      type: String,
      default: '',
    },
    time_limit: {
      type: String,
      default: '0',
    },
  });
  const emit = defineEmits(['calculateElapsedTime', 'examTimeEnd']);
  let time = computed(() => Number(props.time_limit) * 60 * 1000);
  const handleChange = (timeData: TimeData) => {
    // 转换时间戳
    const time1 =
      timeData.hours * 60 * 60 * 1000 +
      timeData.minutes * 60 * 1000 +
      timeData.seconds * 1000 +
      timeData.milliseconds;
    // 转换成分钟
    const useTime = Math.ceil((time.value - time1) / 1000 / 60);
    emit('calculateElapsedTime', useTime);
  };

  const end = () => {
    emit('examTimeEnd');
  };
</script>
